<template>
  <drop-wrap :data="data" :index="index" :element="element">
    <el-form-item
      :id="element.cid"
      :prop="prop"
      :rules="rules"
      :label="element.options.label"
    >
      <el-select
        :class="[store.configuration.toView ? 'toview' : null]"
        v-model="element.options.defaultValue"
        @change="exec"
        v-bind="selectAttrs"
        :placeholder="element.options.placeholder"
      >
        <el-option
          v-for="item in element.options.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </drop-wrap>
</template>

<script>
import { ruleCheck } from "@/low-code/utils/store.js";
import { ruleCheckOringin } from "@/low-code/utils/enumeration.js";
export default {
  props: ["element", "data", "index"],
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
    };
  },
  computed: {
    prop() {
      return `${this.element.fullModelTag}`;
    },
    store() {
      return this.element.getRoot();
    },
    selectAttrs() {
      return {
        filterable: this.element.options.filterable,
        disabled:
          this.element.options.disabled || this.store.configuration.toView,
      };
    },
    rules() {
      let _this = this;
      const rules = [{ validator: ruleCheck.noCheck(), trigger: "blur" }];
      this.element.rules.map((item) => {
        if (item.ruleType == ruleCheckOringin.SELECT) {
          item.validator = ruleCheck.validatePass(item.validatorType);
          rules.push(item);
        } else {
          rules.push({
            validator:function (rule, value, callback){
              let form= _this.store.models
              item.validator&&eval(item.validator)(rule, value, callback,form);
            },
            trigger: "change",
          });
        }
      });
      return rules;
    },
  },
  methods: {
    exec() {
      this.element.options.eventCode &&
        this.store.eventCenter.fire(this.element.options.eventCode, {
          triggerSource: this.element,
        });
    },
  },
};
</script>

<style  scoped>
.el-select {
  width: 100%;
}
</style>